<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-06-19 23:42:34
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 用户信息编辑
-->
<template>
  <div class="edit-user-container fit overflow-auto">
    <div class="form-head-box">基本信息</div>
    <div class="form-body-box">
      <div class="form-body form-body-left">
        <div class="form-group">
          <div class="title">姓名</div>
          <div class="cont">
            <input v-model="userData.real_name" type="text" placeholder="姓名" class="form-input" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">手机号</div>
          <div class="cont">
            <input v-model="userData.account_phone" type="text" placeholder="手机号" class="form-input" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">手机号码显示情况</div>
          <div class="cont cont-none">
            <el-radio-group v-model="userData.phone_visible_switch">
              <el-radio :label="0">隐藏</el-radio>
              <el-radio :label="1">可见</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-group">
          <div class="title">显示手机号</div>
          <div class="cont">
            <input v-model="userData.work_phone" type="text" placeholder="显示手机号" class="form-input" />
          </div>
        </div>
      </div>
      <div class="form-body form-body-right">
        <div class="form-group">
          <div class="title">用户头像</div>
          <div class="cont cont-none">
            <div class="img-box">
              <img class="user-img" :src="imgUrlSet(userData.icon)" alt="" />
              <!-- <UpImage :url="userData.icon !== '' ? userData.icon : userLogo" @getImg="getImg" /> -->
            </div>
            <div class="tips" @click="dialogVisible1 = true">修改</div>
            <avatar-cropper :dialog-visible.sync="dialogVisible1" @closeAvatarDialog="closeAvatarDialog1" />
          </div>
        </div>
      </div>
    </div>
    <div class="form-head-box">职业信息</div>
    <div class="form-body-box">
      <div class="form-body form-body-left">
        <div class="form-group">
          <div class="title">单位名称</div>
          <div class="cont">
            <input v-model="userData.unit_name" type="text" placeholder="请输入单位名称" class="form-input" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">单位级别</div>
          <div class="cont">
            <el-select v-model="userData.unit_level" class="z-select" placeholder="请选择">
              <el-option v-for="item in unit_levelOption" :key="item.id" :label="item.val" :value="item.val" />
            </el-select>
            <!-- <input v-model="userData.unit_level" type="text" placeholder="请输入单位级别" class="form-input" /> -->
          </div>
        </div>
        <div class="form-group">
          <div class="title">部门/科室</div>
          <div class="cont">
            <input v-model="userData.unit_department" type="text" placeholder="请输入部门科室" class="form-input" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">职称</div>
          <div class="cont">
            <input v-model="userData.unit_title" type="text" placeholder="请输入职称" class="form-input" />
          </div>
        </div>
        <div class="form-group form-group-long">
          <div class="title">任职</div>
          <div v-for="(item, key) in unit_jobList" :key="key" class="cont cont2">
            <input v-model="unit_jobList2[key]" type="text" placeholder="请输入任职" class="form-input" />
            <span class="iconfont icon-jian" @click="delJop(key)"></span>
          </div>
          <div class="add-box" @click="addJob()">
            <span class="iconfont icon-jia"></span>
            添加
          </div>
        </div>
        <div class="form-group form-group-long form-group-area">
          <div class="title">简介</div>
          <div class="cont cont-area">
            <el-input v-model="userData.intro" placeholder="请输入简介" class="form-input form-input2" type="textarea"
              :rows="5" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">单位地址</div>
          <div class="cont">
            <!-- <input v-model="unit_addr" type="text" placeholder="请选择省市区" class="form-input"> -->
            <el-cascader v-model="unit_addr" class="z-cascader" :options="areaData" clearable :props="areaProps" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">详细地址</div>
          <div class="cont">
            <input v-model="userData.unit_addr" type="text" placeholder="详细地址" class="form-input" />
          </div>
        </div>
      </div>
      <div class="form-body form-body-right">
        <div class="form-group">
          <div class="title">
            个人形象照
            <span class="tip-title">(用户名片首页展示)</span>
          </div>
          <div class="cont cont-none">
            <div class="img-box">
              <img class="user-img" :src="imgUrlSet(userData.real_photo)" alt="" />
              <!-- <UpImage :url="userData.real_photo !== '' ? userData.real_photo : userLogo
                " @getImg="getImg2" /> -->
            </div>
            <div class="tips" @click="dialogVisible2 = true">修改</div>
            <avatar-cropper :dialog-visible.sync="dialogVisible2" @closeAvatarDialog="closeAvatarDialog2" />
          </div>
        </div>
        <div class="form-group">
          <div class="title">单位LOGO</div>
          <div class="cont cont-none">
            <div class="img-box">
              <img class="user-img" :src="imgUrlSet(userData.unit_logo)" alt="" />
              <!-- <UpImage :url="userData.unit_logo" @getImg="getImg3" /> -->
            </div>
            <div class="tips" @click="dialogVisible3 = true">修改</div>
            <avatar-cropper :dialog-visible.sync="dialogVisible3" @closeAvatarDialog="closeAvatarDialog3" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <el-button class="btn" @click="cancelFun()">
        取消
      </el-button>
      <el-button class="btn sure-btn" type="primary" @click="sureFun()">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import { getInfo, editUserInfo } from '@/api/user'
import { getGlobalApi } from '@/api/base'
// import UpImage from '@/components/upload/up-image.vue'
import userLogo from '@/assets/images/user-logo.png'
import areaData from '@/assets/json/area.json'
import avatarCropper from '@/components/upload/avatarCropper'

export default {
  components: {
    // UpImage,
    avatarCropper
  },
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      unit_levelOption: [],
      userData: {
        id: 1,
        users_uniqueid: '',
        real_name: '', // 姓名
        icon: '', // 头像
        unit_name: '', // 单位名称
        unit_logo: '', // 单位logo
        unit_department: '', // 部门
        unit_title: '', // 职位
        unit_job: '', // 任职
        intro: '', // 简介
        create_datetime: '2024-04-07 13:49:04',
        update_datetime: '2024-04-07 13:49:04',
        phone_visible_switch: 0, // 手机号可见性:0=隐藏,1=可见
        unit_level: '', // 单位级别
        real_photo: '' // 真人照片
      },
      unit_jobList: [],
      unit_jobList2: [],
      unit_addr: '',
      process: process.env.VUE_APP_BASE_API,
      imageUrl: '',
      userLogo: userLogo,
      areaData: areaData,
      areaProps: {
        value: 'name',
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.getOption()
    this.gertUserData()
  },
  methods: {
    closeAvatarDialog1(data) {
      console.log(11, data)
      this.userData.icon = data
      this.dialogVisible = false
    },
    closeAvatarDialog2(data) {
      console.log(22, data)
      this.userData.real_photo = data
      this.dialogVisible = false
    },
    closeAvatarDialog3(data) {
      console.log(33, data)
      this.userData.unit_logo = data
      this.dialogVisible = false
    },
    getOption() {
      const data = {
        group: 'hospital'
      }
      getGlobalApi(data).then((res) => {
        this.unit_levelOption = res.data
      })
    },
    gertUserData() {
      getInfo().then((res) => {
        this.userData = res.data
        if (res.data.unit_job !== '') {
          this.unit_jobList = res.data.unit_job.split(',')
          this.unit_jobList2 = res.data.unit_job.split(',')
        } else {
          this.unit_jobList = ['']
          this.unit_jobList2 = ['']
        }
        this.unit_addr = [
          res.data.unit_addr_province,
          res.data.unit_addr_city,
          res.data.unit_addr_region
        ]
      })
    },
    imgUrlSet(url) {
      let imageUrl = url
      if (url && url !== '') {
        if (url.indexOf('http') !== -1) {
          imageUrl = url
        } else {
          imageUrl = process.env.VUE_APP_FILE_API + url
        }
      } else {
        imageUrl = this.userLogo
      }
      return imageUrl
    },
    getImg(url) {
      this.userData.icon = url
    },
    getImg2(url) {
      this.userData.real_photo = url
    },
    getImg3(url) {
      this.userData.unit_logo = url
    },
    delJop(index) {
      if (this.unit_jobList.length > 1) {
        this.unit_jobList.splice(index, 1)
        this.unit_jobList2.splice(index, 1)
      } else {
        this.unit_jobList[0] = ''
        this.unit_jobList2[0] = ''
      }
    },
    addJob() {
      this.unit_jobList.push('')
      this.unit_jobList2.push('')
    },
    cancelFun() {
      this.$router.go(-1)
    },
    sureFun() {
      this.$confirm('是否确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.sureFun2()
        })
        .catch(() => {
          //
        })
    },
    sureFun2() {
      let job = ''
      this.unit_jobList2.forEach((item) => {
        if (job === '') {
          job = item
        } else {
          job = job + ',' + item
        }
      })
      const data = {
        ...this.userData,
        unit_job: job,
        unit_addr_province: this.unit_addr[0],
        unit_addr_city: this.unit_addr[1],
        unit_addr_region: this.unit_addr[2]
      }
      editUserInfo(data).then((res) => {
        this.$router.go(-1)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-user-container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px 0;
  padding-left: 100px;
  overflow-y: auto;

  .form-head-box {
    border-left: 3px solid #04d1b8;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #1c1f23;
    line-height: 23px;
    text-align: left;
    padding-left: 10px;
  }

  .form-body-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px 0;
    width: 80%;
    max-width: 1000px;

    .form-body {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;

      .form-group {
        width: 50%;
        padding-right: 40px;
        min-height: 62px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1c1f23;
        line-height: 22px;
        text-align: left;
        margin: 7px 0;

        .title {
          line-height: 26px;
        }

        .cont {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: #ffffff;
          border-radius: 3px 3px 3px 3px;
          border: 1px solid #e0e0e0;
          padding-left: 8px;
          position: relative;

          .form-input {
            width: 100%;
            height: 100%;
            border: 0;
            outline: none;
            background: none;
          }

          .img-box {
            width: 120px;
            height: 120px;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            border: 1px solid #eee;

            .user-img {
              width: 100%;
              height: 100%;
            }
          }

          .icon-jian {
            position: absolute;
            right: 3px;
            top: 0;
            cursor: pointer;
            color: #ff6f70;
          }

          .z-cascader {
            width: 100%;
            height: 100%;

            ::v-deep {
              .el-input {
                width: 100%;
                height: 100%;

                .el-input__inner {
                  border: 0;
                  line-height: 40px;
                  height: 100%;
                  background: none;
                }
              }
            }
          }
        }

        .cont2 {
          margin-bottom: 5px;
        }

        .cont-none {
          border: 0;
        }

        .cont-area {
          height: auto;

          .form-input2 {
            ::v-deep {
              .el-textarea__inner {
                border: 0;
              }
            }
          }
        }

        .add-box {
          font-size: 12px;
          color: #04d1b8;
          line-height: 14px;
          text-align: left;
          cursor: pointer;

          .iconfont {
            margin-right: 2px;
          }
        }
      }

      .form-group-long {
        width: 100%;
      }
    }

    .form-body-left {
      width: calc(100% - 120px);
    }

    .form-body-right {
      width: 120px;

      .form-group {
        width: 100%;
        padding: 0;

        .cont {
          height: auto;
          padding: 0;
          position: relative;
          cursor: pointer;
          margin-top: 5px;

          .tips {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 34px;
            line-height: 34px;
            background: rgba(0, 0, 0, 0.3);
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }

  .btn-box {
    width: 70%;
    text-align: center;
    margin: 15px;

    .btn {
      margin: 0 15px;
    }
  }
}
</style>
